<template>
  <!-- 指导老师管理页面的结构 -->
  <!-- 按钮区域，包含添加指导老师的按钮和搜索区域 -->
  <el-row class="el_row_btn">
    <!-- 添加指导老师的按钮 -->
    <el-col :span="24" class="content">
      <div class="content_top_btn">
        <div>
          <el-button size="large" class="tob_tabs" @click="handleCreateInfo"
            >添加指导老师</el-button
          >
        </div>
        <div>
          <!-- 搜索区域，包含教师姓名和手机号码的输入框以及搜索按钮 -->
          <el-space>
            <el-input
              class="top_search_inp"
              v-model="query_data.teacherName"
              placeholder="搜素：教师姓名"
              clearable
            />
            <el-input
              class="top_search_inp"
              v-model="query_data.phone"
              placeholder="搜素：手机号码"
              clearable
            />
            <el-button
              size="large"
              :icon="Search"
              circle
              :loading="loading"
              @click="
                () => {
                  handleLoad(true);
                }
              "
            />
          </el-space>
        </div>
      </div>
    </el-col>
  </el-row>
  <!-- 表格内容区域，展示指导老师的详细信息 -->
  <el-table
    :data="data"
    border
    style="width: 100%"
    v-loading="loading"
    empty-text="暂无人员"
  >
    <el-table-column label="学生ID" prop="teacherId" width="80" />
    <el-table-column label="姓名" prop="teacherName" width="100">
    </el-table-column>
    <el-table-column label="手机号码" prop="phone" width="120" />
    <el-table-column label="性别" prop="gender" width="72">
      <template #default="scope">
        <el-tag v-if="scope.row.gender == 0" type="danger">女</el-tag>
        <el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="证件照" prop="documentImg">
      <template #default="scope">
        <el-popover placement="right">
          <template #reference>
            <el-icon size="20" style="cursor: pointer">
              <View />
            </el-icon>
          </template>
          <ImageComponent :src="scope.row.documentImg" />
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="学校" prop="schoolName" />

    <el-table-column label="创建时间" prop="createTime" width="180" />
    <el-table-column label="操作" prop="Address" width="100">
      <template #default="scope">
        <el-dropdown
          trigger="click"
          @command="(value) => handleOperate(value, scope.row)"
        >
          <span class="el_dropdown_link">
            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit-info"
                ><el-icon> <EditPen /> </el-icon>编辑信息</el-dropdown-item
              >
              <el-dropdown-item command="remove-item">
                <el-icon> <CircleClose /> </el-icon>删除人员
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件，用于切换不同页码的数据 -->
  <div class="pagination-container">
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="total"
      @current-change="handlePage"
    />
  </div>
  <!-- 编辑信息的弹窗 -->
  <el-dialog
    v-model="info_modal"
    :title="info_modal_title"
    class="info-modal"
    width="960px"
  >
    <InfoForm
      ref="InfoModal"
      @sub="
        info_modal = false;
        handleLoad(true);
      "
    />
  </el-dialog>
</template>

<script  setup>
// 导入API函数、组件和其他依赖
import { GetTeachersApi, DeleteTeacherApi } from "@/api/manage/institution";
// 导入Vue的生命周期钩子和响应式API
import { onMounted, ref, nextTick } from "vue";
// 导入自定义钩子
import { usePage } from "@/hooks/usePage";
// 导入子组件
import InfoForm from "./components/tec-info-form.vue";
// 导入Element Plus的弹窗和消息提示组件
import { ElMessage, ElMessageBox } from "element-plus";
// 导入图片预览组件
import ImageComponent from "@/components/image-component/index.vue";
// 导入Vuex的用户状态管理store
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
import { Delete, Search } from "@element-plus/icons-vue";

// 使用自定义数据钩子获取和管理指导老师数据
const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
  api_fn: GetTeachersApi,
  q_data: {
    teacherName: "",
    phone: "",
  },
});
/**
 * 定义信息弹窗的显示状态和标题
 */
const info_modal = ref(false);
const info_modal_title = ref("添加指导老师");
// 定义子组件的引用
const InfoModal = ref();

const handleCreateInfo = () => {
  handleOperate("create-info", null);
  info_modal_title.value = "添加指导老师";
};
/**
 * 处理添加指导老师按钮点击事件的函数
 */
const handleOperate = (command, row) => {
  // 添加指导老师
  if (command == "create-info") {
    info_modal.value = true;
    nextTick(() => {
      InfoModal.value.handleRest();
    });
  } else if (command == "edit-info") {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能");
      return;
    }
    // 更新
    info_modal.value = true;
    info_modal_title.value = "编辑指导老师";
    nextTick(() => {
      InfoModal.value.handleGetInfo(row);
    });
  } else if (command == "remove-item") {
    if (userStore.info_data.auditStatus != 1) {
      ElMessage.error("审核中或审核未通过，暂不支持使用功能");
      return;
    }
    // 删除
    ElMessageBox.confirm("是否删除该选手", "提示", {
      "cancel-button-text": "取消",
      "confirm-button-text": "确定",
    }).then(async () => {
      let res = await DeleteTeacherApi({
        teacherId: row.teacherId,
      });
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
      }
      handleLoad(true);
    });
  }
};

// 组件挂载后立即加载数据
onMounted(() => {
  handleLoad(true);
});
</script>

<style lang="scss" scoped>
/* 组件的样式定义 */
.header_information {
  /* 头部样式 */
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }

    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  /* 内容样式 */
  :deep(.table_btn_success) {
    padding: 0 5px !important;
    border: none;
  }
  :deep(.el-table) .cell {
    padding: 0 10px;
  }
  .el_row_btn {
    margin-bottom: 20px;
    /* 按钮区域样式 */
    .content {
      .content_top_btn {
        display: flex;
        justify-content: space-between;
        :deep(.tob_tabs) {
          span {
            font-size: 14px !important;
          }
        }
        .top_search_inp {
          width: 300px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
      }
    }
  }
  /* 下拉菜单链接样式 */
  .el_dropdown_link {
    font-size: 14px;
  }
  /* 表格单元格样式 */
  :deep(.el-table__cell) {
    padding: 12px 0 !important;
  }
}
/* 分页组件容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
/* 弹窗样式 */
.info-modal {
}
</style>